<template>
  <el-dialog
    title="收货地址"
    :visible.sync="userAddressListDialogData.isShow"
    width="540px"
    top="35vh"
    @open="getList"
  >
    <div class="address-list">
      <div class="address-item" v-for="item in userAddressList" :key="item.id">
        <div class="address">
          {{
            `${item.name} ${item.phone} ${item.province} ${item.city} ${item.area} ${item.detailedAddress}`
          }}
          <span class="is-default">{{
            item.isDefault ? '（默认地址）' : ''
          }}</span>
        </div>
        <div class="option">
          <el-button type="text" @click="showEditUserAddressDialog(item)"
            >修改</el-button
          >
        </div>
      </div>
    </div>
    <edit-user-address-dialog
      :editUserAddressDialogData="editUserAddressDialogData"
      @update-address-successful="getList"
    ></edit-user-address-dialog>
  </el-dialog>
</template>

<script>
import { getUserAddressList } from '@/api/system/user'
import editUserAddressDialog from './editUserAddressDialog'

export default {
  components: {
    editUserAddressDialog
  },
  props: ['userAddressListDialogData'],
  data() {
    return {
      userAddressList: [],
      editUserAddressDialogData: {
        isShow: false
      }
    }
  },
  methods: {
    showEditUserAddressDialog(address) {
      this.editUserAddressDialogData.address = address
      this.editUserAddressDialogData.isShow = true
    },
    getList() {
      this.$parent.getList()
      getUserAddressList(
        this.userAddressListDialogData.userId,
        {},
        (res) => {
          const defaultAddressIndex = res.rows.findIndex(
            (i) => i.isDefault === true
          )
          this.userAddressList = [
            ...res.rows.slice(defaultAddressIndex, defaultAddressIndex + 1),
            ...res.rows.slice(0, defaultAddressIndex),
            ...res.rows.slice(defaultAddressIndex + 1)
          ]
        },
        (res) =>
          this.$message({
            message: res.message,
            type: 'warning'
          })
      )
    }
  }
}
</script>

<style scoped lang="less">
:deep(.el-dialog__body) {
  padding: 30px 20px !important;
}
.address-list {
  width: 100%;
  .address-item {
    display: flex;
    justify-content: space-between;
  }
}
.is-default {
  color: aquamarine;
}
</style>
